<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import httpClient from '@/services/http-instance';
import type { ApiResponse } from '@/types/http';

const { t } = useI18n();
const currentLocale = ref(uni.getStorageSync('language') || 'zh-CN');

// 模拟响应数据
interface UserInfo {
  id: number;
  name: string;
  email: string;
}

const loading = ref(false);
const userInfo = ref<UserInfo | null>(null);
const errorMsg = ref('');

// 切换语言
function toggleLanguage() {
  const newLocale = currentLocale.value === 'zh-CN' ? 'en-US' : 'zh-CN';
  currentLocale.value = newLocale;
  uni.setStorageSync('language', newLocale);
  // 刷新页面以应用新语言
  uni.reLaunch({
    url: '/pages/test/index'
  });
}

// 模拟成功请求
const testSuccessRequest = async () => {
  loading.value = true;
  errorMsg.value = '';
  try {
    const response = await httpClient.get<UserInfo>('/api/user');
    userInfo.value = response.data;
  } catch (error: any) {
    errorMsg.value = error.message;
  } finally {
    loading.value = false;
  }
};

// 模拟失败请求
const testFailRequest = async () => {
  loading.value = true;
  errorMsg.value = '';
  try {
    await httpClient.get('/api/unauthorized');
  } catch (error: any) {
    errorMsg.value = error.message;
  } finally {
    loading.value = false;
  }
};

// 模拟设置token
const setMockToken = () => {
  uni.setStorageSync('token', 'mock-token-123');
};

// 清除token
const clearToken = () => {
  uni.removeStorageSync('token');
};
</script>

<template>
  <view class="container">
    <view class="header">
      <text class="title">{{ t('common.loading') }}</text>
      <button @click="toggleLanguage">
        {{ t('common.language') }}: {{ currentLocale }}
      </button>
    </view>

    <view class="content">
      <view class="button-group">
        <button @click="setMockToken">{{ t('auth.setToken') }}</button>
        <button @click="clearToken">{{ t('auth.clearToken') }}</button>
      </view>

      <view class="button-group">
        <button @click="testSuccessRequest" :loading="loading">
          {{ t('common.testSuccess') }}
        </button>
        <button @click="testFailRequest" :loading="loading">
          {{ t('common.testFail') }}
        </button>
      </view>

      <view v-if="userInfo" class="info-box">
        <text>ID: {{ userInfo.id }}</text>
        <text>{{ t('common.name') }}: {{ userInfo.name }}</text>
        <text>Email: {{ userInfo.email }}</text>
      </view>

      <view v-if="errorMsg" class="error-box">
        {{ t('common.error') }}: {{ errorMsg }}
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.info-box {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.info-box text {
  display: block;
  margin-bottom: 5px;
}

.error-box {
  background-color: #ffe6e6;
  color: #ff4d4f;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}
</style> 